<template> 
	<view> 
		<!-- #ifdef APP-PLUS -->
				   <view class="status_bar">  
					 <view class="top_view"></view>  
				   </view>   
		<!-- #endif -->
		<uni-nav-bar left-icon="back" @clickLeft="goback" @clickRight="gosubmit" left-text=""  title="上报故障"></uni-nav-bar>
		<view class="p15">
			<uni-card >
				<view class="choose" @click="goSelectElevator"> 
					<view  class="input" >{{name}}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<!-- <view class="choose">
					<input class="input" type="text" placeholder="选择电梯" />
					<uni-icons type="arrowright"></uni-icons>
				</view> -->
			</uni-card> 
			
			<!-- 上传图片 -->
			<uni-card>
				<view v-if="roomImg" class="upload" @click="roomImgs">
						<image style="width: 100%;height: 100%;" mode="heightFix" :src="roomImg"></image>
				 </view>
				 <view v-else class="upload" @click="roomImgs">
				 		<view class="photograph">
				 			<image mode="widthFix" src="../../../../static/img/fault/photo.png"></image>
				 			<view class="">
				 				点击拍摄照片
				 			</view>
				 		</view>
				  </view>
			</uni-card>
			
			<!-- 备注 -->
			<uni-card> 
				<view class="comment">
					<fuck-textarea  placeholder="故障描述:" maxlength="100" v-model="remark"></fuck-textarea>
				</view>
			</uni-card>
			
			<!-- 标签 -->
			<view class="uni-list">
				<view class="tag" v-for="(item,index) in list_type" :key="index" @click="choice(index)" :class="index == faultType ? 'active' : ''">
					<view >{{item.dictLabel}}</view>
				</view>
			</view>
			
			<view class="choose" style="border-bottom: none;">
				<view class="choose-left" >是否需要大修</view>
				<switch  @change="ChangeSwich" class="heighs" color="#017EFE" />
			</view>
		</view>
		
		<button type="default" @click="gosubmit">提交</button>
	</view>
</template>   
 
<script>
	import fuckTextarea from '@/components/fuck-textarea/fuck-textarea.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import fault from "@/serve/api/fault.js"
	import submit from "@/serve/api/submit.js"
	import {imgSet} from "@/serve/api/imgSet.js"
	export default {
		components: {fuckTextarea,uniTag},
		data() {
			return {
				name:'选择电梯',	  
				roomImg:'',
				list_type:[],//故障类型  
				faultType:"dd",
				remark:'',
				isOverhaul :1,//是否需要大修
				elevatorId:'',
			}
		},
		onLoad(e) {
			// if(e.elevatorId){
			// 	this.elevator_name(e.elevatorId)
			// }
			this.genre()
			
		}, 
		methods: {
			ChangeSwich(e){
				this.isOverhaul = e.target.value ? 0 : 1
			},
			// 导航返回
			goback(){
				uni.navigateBack({})
			},
			// 导航右边事件
			async gosubmit(){
				if(this.name == '选择电梯' || this.name == ''){
					uni.showToast({
						title: '请添加电梯',
						icon: 'none'
					})
					return
				}
				// if(this.roomImg == ''){
				// 	uni.showToast({
				// 		title: '请上传图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if(this.faultType == 'dd'){
					uni.showToast({
						title: '请选择被困类型',
						icon: 'none'
					})
					return
				}
				// var outsideTask = []
				// for(var i = 0;i < this.list_type.length; i++){
				// 	if(this.list_type[i].selectStatus != false){
				// 		outsideTask.push(this.list_type[i].dictCode)
				// 	}
				// }
				// if(outsideTask.length == 0){
				// 	uni.showToast({
				// 		title: '请选择被困类型',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if(this.remark == ''){
				// 	uni.showToast({
				// 		title:'请输入故障描述',
				// 		icon:'none'
				// 	})
				// 	return
				// } 
				console.log(this.isOverhaul)
				let parme = {
					elevatorId:this.elevatorId,
					faultImage: this.roomImg,
					faultType: this.list_type[this.faultType].dictValue ,
					faultMessage:this.remark,
					isOverhaul:this.isOverhaul,
				}
				const res = await fault.reportElevatorFault(parme)
				if(res.data.code == 0){
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					uni.switchTab({
						url:"/pages/tabbar/home/home"
					})
				}else{ 
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			},
			//上传图片
			async roomImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed'],
				})
				this.roomImg = res.data.url
			},
			
			//选择电梯
			async elevator_name(elevatorId){
				const res = await submit.elevatorBaseInfo({
					elevatorId:elevatorId,
				});
				this.name = res.data.data.elevatorName
				this.elevatorId = res.data.data.elevatorId
			},
			//困人类型
			async genre(){
				let parme = {
					code:"business_fault_type"
				}
				const res = await submit.searchDictionList(parme);
				this.list_type = res.data.data
			},
			choice(ind){
				console.log(ind)
				this.faultType = ind
				// var city = this.list_type;
				// var selectStatus = !this.list_type[ind].selectStatus;
				// city[ind].selectStatus = selectStatus,
				// this.list_type = city
			}, 
			// 选择电梯接口调用 elevatorInfo/findCommunityByToken
			goSelectElevator(){
				uni.navigateTo({
					url: '/pages/tabbar/polling/searchResult/searchResult?type=' + 2,
				})
				
			 },
			
		}
			   
	}
</script>

<style scoped>
	*{
		margin:0;
		padding: 0;
	} 
	page{
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}
	view{
		font-size:28rpx;
		line-height:1.8;
		
	}
	.uni-card{
		width: 100%;
		/* height: 96rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		border: none;
		margin: 0 auto;
		
		margin-top: 20rpx;
		
	}
	.choose{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between; 
		text-align: center;
	}
	.input{
		text-align: left;
	}
	/* 上传图片 */
	 .upload{
		height: 196rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		position: relative; 
	}
	.photograph{
		position: absolute;
		top: 0;
		bottom: 0;
		transform: translate(-50% -50%);
		margin: 0 auto;
	}
	.photograph image{
		width: 64rpx;
		height: 52rpx; 
		vertical-align: middle;
		margin: 25rpx;
	}
	.photograph view{
		
		font-size: 30rpx;
		font-weight: 400;
		color: #989BA6;

	} 
	.upload-img{
		width: 177rpx;
		height: 29rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 29rpx;
	}
	.camera{
		margin: 0 auto;
	}
	 
	/* 标签 */
	.uni-tag{
		width: 250rpx; 
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		display: inline-block;
		margin: 10rpx;
	} 
	.tag{
		padding: 5px 15px;
		background-color: #FFFFFF;
		margin: 20px 0 0 0;
		border-radius: 25px;
		
		/* width: 50%; */
		/* margin: 0 auto; */
		
	} 
	.active {
		color: #FFFFFF;
		background-color: #017EFE;
	}
	.uni-list{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		
	}
	.p15{
		padding: 0 20px;
		box-sizing: border-box;
	}
	
	.choose{
		height: 96rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		/* text-align: center; */
		border-bottom: 1px solid #E2E6EF;
	}
	.choose-left{		
		font-size: 26rpx;
		text-align: left;
		color: #34363D;
	}
	.choose .heighs{
		/* height: 40rpx; */
		transform:scale(0.7);
	}
	
	.status_bar {height: var(--status-bar-height);width: 100%;background-color: transparent;}  
	button {
		width: 670rpx;
		height: 52px;
		background: #017EFE;
		box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
		border-radius: 26px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 52px;
		margin: 50px auto 34px;
	}
</style>
 